<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>{$Think.lang.print_test_express_documents}</title>
    <script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/jquery-2.1.4.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/jquery.poshytip.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/jquery.printarea.js" charset="utf-8"></script>
    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/common.css" />
        <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/seller.css" />
</head>
<body>
<div id='printarea'>    
<style>
        body { margin: 0; }
        .waybill_area { position: relative; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_back { position: relative; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_back img { width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_design { position: absolute; left: 0; top: 0; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_item { position: absolute; left: 0; top: 0; width:100px; height: 20px; border: 1px solid #CCCCCC; }
        .print-btn { background:#FFF; border: solid 1px #ccc; line-height:32px; display: inline-block; padding:5px 10px; margin-top: 20px; margin-left: 280px; border-radius: 5px; box-shadow: 2px 2px 0 rgba(153,153,153,0.2); cursor: pointer;}
        .print-btn:hover {  background: #555; box-shadow: none; border-color: #555;}
        .print-btn i {ertical-align: middle; display: inline-block; width: 32px; height: 32px;line-height:32px;color:#999;text-align:center;font-size:20px;}
        .print-btn a { font-family:"microsoft yahei"; font-size: 20px; text-decoration: none; padding: 0 0 0 10px; color: #555; font-weight:600; display:inline-block; vertical-align: middle;}
        .print-btn:hover a, .print-layout .print-btn a:hover { color: #FFF;  text-decoration:none;}


    </style> 
<div class="waybill_back"> <img src="{$waybill_info.waybill_image_url}" alt=""> </div>
<div class="waybill_design">
    {if $waybill_info.waybill_data}
    {foreach name="waybill_info.waybill_data" item="data"}
    {notempty name="$data.check"}
    <div class="waybill_item" style="left:{$data.left}px; top:{$data.top}px; width:{$data.width}px; height:{$data.height}px;">{$data.content}</div>
    {/notempty}
    {/foreach}
    {/if}
</div>
</div>
<div class="print-btn control"><a id="btn" class="" href="javascript:;"><i class="iconfont">&#xe7ca;</i>{$Think.lang.total_order}</a> </div>
<script>
    var HOMESITEURL = "{$Think.HOME_SITE_URL}";
    $(document).ready(function() {
        $('#btn').on('click', function() {
            pos();
            //$('.waybill_back').hide();

            $("#printarea").printArea();
        });

        var pos = function () {
            var top = {$waybill_info.waybill_pixel_top};
            var left = {$waybill_info.waybill_pixel_left};

            $(".waybill_design").each(function(index) {
                var offset = $(this).offset();
                var offset_top = offset.top + top;
                var offset_left = offset.left + left;
                $(this).offset({ top: offset_top, left: offset_left})
            });
        };
    });
</script>
</body>
</html>